<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Border 边框</title>
	<link rel="stylesheet" href="../static/css/element.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.div1{
	border-bottom: 1px solid #E6E6E6;
}
.div2{
	border-bottom: 2px dashed #E6E6E6;
}
.d{
	display: flex;
}
.d1, .d2, .d3, .d4{
	margin-right: 20px;
	width: 100px;
	height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	line-height: 40px;
}
.d1{
	border-radius: 0px;
}
.d2{
	border-radius: 2px;
}
.d3{
	border-radius: 4px;
}
.d4{
	border-radius: 20px;
}
.color-div{
	width: 360px;
	height: 112px;
	display: flex;
	flex-direction: column;
}

</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">边框样式</el-divider><!-- =============================================================== -->
	<p class="desc">边框样式用法。</p>
	<div class="div1">Solid</div>
	<div class="div2">Dashed</div>
	
	<el-divider content-position="left">圆角</el-divider><!-- =============================================================== -->
	<div class="d">
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
	</div>
	
	<el-divider content-position="left">阴影</el-divider><!-- =============================================================== -->
	<div class="flex flex-col justify-center items-center">
		<div class="inline-flex" :style="{boxShadow:`var(--el-box-shadow)`}">无法渲染</div>
	</div>
	

</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>